$(function(){
	//1、找到container下的所有img标签,li标签,左右按钮
	var aImgs = document.querySelectorAll('#lbt .container img');
	var aLis = document.querySelectorAll('#lbt .container li');
	var btnLeft = document.querySelector('#lbt .container .left');
	var btnRight = document.querySelector('#lbt .container .right');
	//点击事件
	//点击按钮图片切换
	var index = 0; //当前图片下标
	var lastIndex = 0;
	btnRight.onclick = function() {
		//记录上一张图片的下标
		lastIndex = index;
		//清除上一张图片的样式
		aImgs[lastIndex].className = '';
		aLis[lastIndex].className = '';
		index++;
		index %= aImgs.length; //实现周期性变化
		//设置当前图片的样式
		aImgs[index].className = 'on';
		aLis[index].className = 'active';
	}
	//左边按钮类似
	btnLeft.onclick = function() {
		//记录上一张图片的下标
		lastIndex = index;
		//清除上一张图片的样式
		aImgs[lastIndex].className = '';
		aLis[lastIndex].className = '';
		index--;
		if(index < 0) {
			index = aImgs.length - 1;
		}
		//设置当前图片的样式
		aImgs[index].className = 'on';
		aLis[index].className = 'active';
	}
	
	function check(){
	    //记录上一张图片的下标
		lastIndex = index;
		//清除上一张图片的样式
		aImgs[lastIndex].className = '';
		aLis[lastIndex].className = '';
		index++;
		index %= aImgs.length; //实现周期性变化
		//设置当前图片的样式
		aImgs[index].className = 'on';
		aLis[index].className = 'active';
	}
	var num = setInterval(check,2000);
	
	
	$("#lbt").hover(function(){
		clearInterval(num);
	},function(){
		num = setInterval(check,2000);
	})
})